<template>
  <div class="app-container" v-loading="pageLoading">
    <el-steps :active="active">
      <el-step title="填写基础信息" />
      <el-step title="配置任务" />
      <el-step title="配置表单" />
      <el-step title="设计报表" />
    </el-steps>
    <div style="margin-top: 20px">
      <baseInfo ref="baseInfoRef" :type="taskType" :data="baseInfoData" v-if="active == 1" />
      <task ref="taskRef" :type="taskType" :data="taskInfoData" v-if="active == 2" />
      <Form ref="formRef" :type="taskType" :data="formData" :taskInfo="taskInfoData" v-if="active == 3" />
      <!-- <jimuReport ref="jimuRef" :type="taskType" :data="formData" v-if="active == 4" /> -->
      <jimuReportView ref="jimuRefView" :type="taskType" :reportID='editId' :data="formData" v-if="active == 4" />
    </div>
  </div>
</template>

<script setup>
import baseInfo from "./baseInfo.vue";
import task from "./task.vue";
import Form from "./form.vue";
import {
  addTaskTemplate,
  infoTaskTemplate,
  editTaskTemplate,
  addTaskTemplateDetail,
  detailTaskTemplateDetail,
  editTemplateDetail,
} from "@/api/technology/taskTemplate";
import { ref, onMounted, useAttrs, getCurrentInstance } from "vue";
// import jimuReport from "../../jimureport/jimu.vue";
import jimuReportView from "../../jimureport/view.vue";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const active = ref(0);
const attrs = useAttrs();
const baseInfoRef = ref(null);
const taskRef = ref(null);
const formRef = ref(null);
const jimuRef = ref(null);
const jimuRefView = ref(null)
const editId = ref();
const taskInfoData = ref([]);
const formData = ref([]);
const pageLoading = ref(false)
const taskType = ref('')
const baseInfoData = ref({
  templateName: "",
  reportName: "",
  templateType: "",
  version: "V1.0",
  isAudit: "0",
  auditStation: [],
  remark: "",
});
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      //   cancel();
    },
  },
  {
    text: "确 定",
    theme: "primary",
    handle: () => {
      //   submitForm();
    },
    loading: false,
  },
]);
function cancel() {
  emit("close");
}
// 查询任务详情
function getTaskInfo() {
  detailTaskTemplateDetail({ templateId: editId.value }).then((res) => {
    if (res.rows && res.rows.length) {
      res.rows.forEach((item) => {
        if (item.content) {
          item.content = JSON.parse(item.content);
        }
      });
    }
    active.value++;
    taskInfoData.value = res.rows;
    setActions();
  });
}
// 保存数据 第一步
function sumit() {
  const obj = { ...baseInfoData.value };
  obj.auditStation = obj.auditStation.toString();
  console.log(obj);
  if (editId.value) {
    pageLoading.value = true;
    editTaskTemplate(obj).then((res) => {
      // proxy.$modal.msgSuccess(`保存成功`);
      baseInfoData.value = res.data;
      editId.value = baseInfoData.value.id;
      // active.value++;
      getTaskInfo();
      pageLoading.value = false;
      // setActions();
    });
  } else {
      pageLoading.value = true;
    addTaskTemplate(obj).then((res) => {
      pageLoading.value = false;
      proxy.$modal.msgSuccess(`保存成功`);
      active.value++;
      baseInfoData.value = res.data;
      editId.value = baseInfoData.value.id;
      setActions();
    });
  }
}
// 第二步 三 保存
function sumitTwo(list) {
  if (active.value == 3 || active.value == 2) {
    list.forEach((item) => {
      if (item.content) {
        item.content = JSON.stringify(item.content);
      }
    });
  }

  taskInfoData.value = list;
  // 判断是编辑还是新增  判断list中是否有id
  if (list.some((element) => element.id)) {
    pageLoading.value = true;
    editTemplateDetail(list).then((res) => {
      pageLoading.value = false;
      // proxy.$modal.msgSuccess(`保存成功`);
      if (res.data && res.data.length) {
        res.data.forEach((item) => {
          if (item.content) {
            item.content = JSON.parse(item.content);
          }
        });
      }
      taskInfoData.value = res.data;
      active.value++;
      setActions();
    });
  } else {
    pageLoading.value = true;
    addTaskTemplateDetail(list).then((res) => {
      pageLoading.value = false;
      proxy.$modal.msgSuccess(`保存成功`);
      if (res.data && res.data.length) {
        res.data.forEach((item) => {
          if (item.content) {
            item.content = JSON.parse(item.content);
          }
        });
      }
      taskInfoData.value = res.data;
      active.value++;
      setActions();
    });
  }
}
function next() {
  // if(taskType.value == 'view'){
  //   active.value++;
  //     setActions();
  // }
 
  if (active.value == 1) {
    // 校验子表单
    baseInfoRef.value.$refs.ruleFormRef.validate((valid) => {
      console.log(valid);
      if (valid) {
        baseInfoData.value = baseInfoRef.value.ruleForm;
        sumit();
      }
    });
    return;
  }
  if (active.value == 2) {
    // 校验子表单
    console.log(taskRef.value);
    const list = taskRef.value.list;
    const sortableSort = taskRef.value.sortableSort;
    list.forEach((element, index) => {
      element.taskNum = sortableSort[index] || index;
      element.templateId = baseInfoData.value.id;
      if (element.isTimes == "once") {
        element.timer = 1;
      }
    });
    list.sort((a, b) => a.taskNum - b.taskNum);
    console.log(list);
    console.log(sortableSort);
    if (list && list.length) {
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        if (!element.taskName) {
          const i = index + 1;
          return proxy.$modal.msgError(`第${i}行任务名称未填写`);
        }
      }
      sumitTwo(list);
    }
    return;
  }
  if (active.value == 3) {
    // 获取 生成的表单数据
    formRef.value.handleSave(); // 先掉子组件商城一下  防止最后一个没保存上
    // console.log(formRef.value.$refs.designer.getRule());
    // console.log(formRef.value.$refs.designer.getOption());
    sumitTwo(formRef.value.leftData);
    // console.log(formRef.value.leftData);
    // taskInfoData.value = formRef.value.leftData;
    // active.value++;
    // setActions();
    return;
  }
}
function pre() {
  active.value--;
  setActions();
}
function saveInfo(){
  console.log('保存');
  console.log(jimuRef.value);
}
function setActions() {
  actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
    {
      text: "上一步",
      theme: "primary",
      handle: () => {
        pre();
      },
      loading: false,
    },
    {
      text: "下一步",
      theme: "primary",
      handle: () => {
        next();
      },
      loading: false,
    },
  ];
  if (active.value == 1) {
    actions.value = [
      {
        text: "取 消",
        theme: "",
        handle: () => {
          cancel();
        },
      },

      {
        text: "下一步",
        theme: "primary",
        handle: () => {
          next();
        },
        loading: false,
      },
    ];
  }
  if(active.value == 4){
    actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
    {
      text: "上一步",
      theme: "primary",
      handle: () => {
        pre();
      },
      loading: false,
    },
    // {
    //   text: "保存",
    //   theme: "primary",
    //   handle: () => {
    //     saveInfo();
    //   },
    //   loading: false,
    // },
  ];
  }
  emit("setActions", actions.value);
}
function getDetail(id) {
  infoTaskTemplate(id).then((res) => {
    active.value = 1;
    baseInfoData.value = res.data;
  });
}
onMounted(async () => {
  const { data,type } = attrs;
  console.log(type);
  taskType.value = type
  setActions();
  if (data.id) {
    getDetail(data.id);
    editId.value = data.id;
  } else {
    active.value = 1;
  }
});
</script>

<style lang="scss" scoped></style>
